<template>
  <el-row :gutter="10">
    <el-col :xs="24" :md="18"
      ><div class="sale-chart-wrap" ref="saleChartRef"></div
    ></el-col>
    <el-col :xs="24" :md="6">
      <div>
        <h5>门店销售额排名</h5>
        <ul>
          <li v-for="(rank, index) in ranks" :key="rank.id" class="ranks">
            <span>
              <span class="rank-tik" :class="{ active: index <= 2 }">{{
                index + 1
              }}</span>
              <span>{{ rank.shopName }}</span>
            </span>
            <span>￥{{ rank.sales }}</span>
          </li>
        </ul>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: 'SalesChart',
}
</script>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const ranks = ref([
  { id: 1, shopName: '肯德基', sales: '323,234' },
  { id: 2, shopName: '肯德基1', sales: '323,111' },
  { id: 3, shopName: '肯德基2', sales: '323,222' },
  { id: 4, shopName: '肯德基3', sales: '323,333' },
  { id: 5, shopName: '肯德基4', sales: '323,444' },
  { id: 6, shopName: '肯德基5', sales: '323,555' },
  { id: 7, shopName: '肯德基6', sales: '323,666' },
])

const saleChartRef = ref()
onMounted(() => {
  const myChart = echarts.init(saleChartRef.value)
  const option = {
    title: {
      text: '销售趋势',
      padding: [5, 20],
      textStyle: {
        fontSize: 15,
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: 10,
      top: 45,
      bottom: 0,
      containLabel: true,
    },
    xAxis: {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      axisTick: {
        alignWithLabel: true,
      },
      // boundaryGap: false,
    },
    yAxis: {
      minorTick: { show: false },
      splitLine: {
        lineStyle: {
          color: '#EEE',
        },
      },
    },
    series: {
      type: 'bar',
      barWidth: 30,
      data: [23, 54, 54, 12, 87, 23, 98, 34, 24, 87, 67, 87],
      itemStyle: {
        color: 'skyblue',
      },
    },
  }
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<style scoped>
.active {
  background-color: #666;
  border-radius: 50%;
  color: #fff;
}
.rank-tik {
  display: inline-block;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
ul {
  padding: 0;
  font-size: 12px;
}
.ranks {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  height: 30px;
}
.sale-chart-wrap {
  height: 280px;
}
</style>
